<template>
    <div class="title-tabs" style="
        display: flex;
        width: 100%;
        height: 60px;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;  
      ">
        <!-- <span class="title-tabs_title" v-if="title">
            {{ title ? title : "" }}
        </span> -->
        <div class="card-tab selfTab" style="margin-top: 0">
            <span v-for="(item, index) in dataList" :key="index" :class="tabsIndex == index ? 'active' : ''"
                @click="toggleTabs(index,item)">{{ item.name }}</span>
        </div>
        <div class="tabs-content">
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tabsIndex: 0,
        };
    },
    props: {
        title: String,
        dataList: Array,
        infolist: Array,
    },
    mounted() { },
    methods: {
        toggleTabs(index, item) {
            this.tabsIndex = index;
            this.$emit("on-change", item);
        },
        toggleTable(index, item) {
            this.tabsIndex = index;
            this.$emit("on-changeInfo", item);
        },
    },
};
</script>
<style lang='scss' scoped>
.selfTab {
    span {
        margin-left: 20px;

        &:first-child {
            margin-left: 0;
        }
    }
}

.title-tabs {
    background: #fff;

    &_title {
        font-size: 0.2rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
        line-height: 0.2rem;
    }
}

.card-tab {
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    justify-content: space-between;

    // margin-top: 2.31vh;

    span {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000;
        display: inline-block;
        height: 100%;
        line-height: 60px;
        padding: 0 20px;

        &.active {
            color: rgb(155, 85, 5);
            border-bottom: 3px solid rgb(155, 85, 5);
        }
    }
}
</style>
  